<template>
  <a-modal :visible="visible" :footer="null" :width="927" :centered="true" :zIndex="1001" @cancel="onClose">
    <div class="audioNotice" v-if="taskType == 'audio'">
      <a-button type="danger" class="closeBtn" @click="onClose">关闭</a-button>
    </div>
    <div class="bigFileNotice" v-if="taskType == 'bigFile'">
      <a-button type="danger" class="closeBtn" @click="onClose">关闭</a-button>
    </div>
    <div class="videoNotice" v-if="taskType == 'video'">
      <a-button type="danger" class="closeBtn" @click="onClose">关闭</a-button>
    </div>
  </a-modal>
</template>

<script>
export default {
  name: 'UserNotice',
  components: {},
  data() {
    return {
      visible: false,
      taskType: '',
    };
  },
  created() {},
  methods: {
    show(state, taskType) {
      this.visible = state;
      this.taskType = taskType;
    },
    onClose() {
      this.visible = false;
    },
    init() {
      this.form = {};
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-modal-body {
  padding: 0;
}
.audioNotice {
  background-image: url('../../../assets/img/uploadNotice/audio.png');
  height: 545px;
  .title {
    display: flex;
    font-size: 20px;
  }
  .closeBtn {
    position: absolute;
    left: 45%;
    bottom: 30px;
    width: 88px;
    height: 34px;
    background: linear-gradient(328deg, #cc3232 0%, #ed5050 100%);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
  }
}
.bigFileNotice {
  background-image: url('../../../assets/img/uploadNotice/bigFile.png');
  height: 545px;
  .title {
    display: flex;
    font-size: 20px;
  }
  .closeBtn {
    position: absolute;
    left: 45%;
    bottom: 30px;
    width: 88px;
    height: 34px;
    background: linear-gradient(328deg, #cc3232 0%, #ed5050 100%);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
  }
}
.videoNotice {
  background-image: url('../../../assets/img/uploadNotice/video.png');
  height: 545px;
  .title {
    display: flex;
    font-size: 20px;
  }
  .closeBtn {
    position: absolute;
    left: 45%;
    bottom: 30px;
    width: 88px;
    height: 34px;
    background: linear-gradient(328deg, #cc3232 0%, #ed5050 100%);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
  }
}
</style>
